<template>
	<view class="warp">
		<!-- 顶部 start -->
		<view class="top_box">
			<!-- 搜索 start -->
			<TopSearch :keyword="params.keyword"></TopSearch>
			<!-- 搜索 end -->
			<uv-gap height="10" bgColor="#F1F1F5"></uv-gap>
			<!-- 筛选 start -->
			<view class="drop_warp">
				<!-- 分类下拉 start -->
				<view class="drag_item_w" @click="category_view_open=!category_view_open;order_view_open=false">
					<view class="drag_item">
						<view class="item_name">
							<uv-text :color="params.type_id ?'#fe5d03':'#303133'" lines="1" :text="params.category_name"></uv-text>
						</view>
						<view class="item_icon" v-show="category_view_open">
							<uv-icon name="arrow-up-fill" color="#999999" size="12"></uv-icon>
						</view>
						<view class="item_icon" v-show="!category_view_open">
							<uv-icon name="arrow-down-fill" color="#999999" size="12"></uv-icon>
						</view>
					</view>
				</view>

				<!-- 分类下拉 end -->
				<!-- 分类下拉筛选 start -->
				<view class="category_list_warp" @click.self="category_view_open=false" v-show="category_view_open">
					<view class="category_list">
						<view class="category_one">
							<view class="category_item" v-for="(v,k) in category_list" :key="k" :class="params.type_id==v.id?'category_item_active':''" @click="clickCategory(v)">
								<image :src="v.image" mode="aspectFit"></image>
								<view class="category_name">
									{{v.name}}
								</view>
							</view>
						</view>
						<view class="category_two">
							<view class="category_item" v-for="(v,k) in category_current" :key="k" :class="v.id==params.type2_id?'category_item_active':''" @click="selectCategory(v)">
								<view class="item_img">
									<image :src="v.image" mode="aspectFit"></image>
								</view>
								<view class="category_name">
									{{v.name}}
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 分类下拉筛选 end -->
				<view class="drag_item_w" @click="order_view_open=!order_view_open;category_view_open=false">
					<view class="drag_item">
						<view class="item_name">
							<uv-text :color="params.order != '' ?'#fe5d03':'#303133'" lines="1" :text="order_current||'综合排序'"></uv-text>
						</view>
						<view class="item_icon" v-show="order_view_open">
							<uv-icon name="arrow-up-fill" color="#999999" size="12"></uv-icon>
						</view>
						<view class="item_icon" v-show="!order_view_open">
							<uv-icon name="arrow-down-fill" color="#999999" size="12"></uv-icon>
						</view>
					</view>
				</view>

				<!-- 排序下拉 start -->
				<view class="order_list_warp" @click.self="order_view_open=false" v-show="order_view_open">
					<view class="order_list">
						<view class="order_item" :class="params.order == v.value ?'order_item_active':''"
							  v-for="(v,k) in order_list" :key="k" @click="clickOrder(v)">
							<view class="order_item_text">
								{{v.name}}
							</view>
							<view class="order_item_icon" v-show="params.order == v.value">
								<uv-icon name="checkbox-mark" color="#fd5c02" size="28rpx"></uv-icon>
							</view>
						</view>
					</view>
				</view>
				<!-- 排序下拉 end -->
			</view>
			<!-- 筛选 end -->
		</view>
		<!-- 顶部 end -->
		<!-- 列表 start -->
		<view class="course_list">
			<view class="course_item" v-for="(v,k) in rows" :key="k" @click="jumpUrl('/pages/course/details?id='+v.id)">
				<view class="course_img">
					<image :src="v.image" mode="aspectFill"></image>
				</view>
				<view class="course_r">
					<view class="course_title line_2">
						{{v.name}}
					</view>
					<view class="course_author">
						讲师：{{v.author_name}}
					</view>
					<view class="course_other">
						<view class="course_icon">
							<uv-icon name="play-circle-fill" color="#999" size="16"></uv-icon>
							<view class="course_icon_text">{{v.study_num}}</view>
						</view>
						<view class="course_icon">
							<uv-icon name="eye-fill" color="#999" size="16"></uv-icon>
							<view class="course_icon_text">{{v.click}}</view>
						</view>
					</view>
					<view class="course_time">
						<view class="course_icon">
							<uv-icon name="clock" color="#999" size="16"></uv-icon>
							<view class="course_icon_text">{{v.createtime_text}}</view>
						</view>
					</view>
				</view>
			</view>
			<uv-load-more :status="apiStatus" />

		</view>
		<!-- 列表 end -->
		<!-- 底部tabbar start -->
		<bastTabbar :tabbar_index="1"></bastTabbar>
		<!-- 底部tabbar end -->
		<uv-back-top :scroll-top="scrollTop" icon="arrow-up" z-index="1000" top="200"></uv-back-top>
	</view>
</template>

<script>
	import bastTabbar from '@/component/base-tabbar.vue'
	import TopSearch from "@/component/top-search.vue"
	export default {
		components: {
			bastTabbar,
			TopSearch
		},
		computed: {
		},
		onReachBottom() {
			console.log('onReachBottom')
			this.params.page++
			this.search()
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
			// #ifdef APP-NVUE
			this.scrollTop = e.detail.scrollTop;
			// #endif
		},
		onLoad(options) {
			this.params.keyword = options.keyword || ''
			this.params.type_id = options.type_id || 0
			this.params.type2_id = options.type2_id || 0
			this.params.category_name = options.category_name || '全部分类'
			this.get_classroom_type()
			this.search()
		},
		data() {
			return {
				scrollTop: 0,
				// 分类
				category_list:[],
				category_current: {},
				category_view_open: false,
				// 排序
				order_list:[{name:"综合排序",value:"weigh"},{name:"发布时间",value:"createtime"},{name:"人气优先",value:"click"}],
				order_current: "",
				order_view_open: false,
				//
				rows: [],
				// 搜索条件
				params: {
					category_name:"全部分类",
					type_id: 0,
					type2_id: 0,
					page: 1,
					order: '',
					pagesize: 5,
					keyword:'',
				},
				//
				apiMore: true,
				apiStatus: 'loadmore',
				apiPost: false,
			}
		},
		methods: {
			async search() {
				if (this.apiPost || this.apiMore===false) {
					return false
				}
				const res = await this.$myRequest({
					url: "course/search",
					type: "post",
					data: this.params,
				});
				if(res.code){
					this.apiMore = res.data.length < this.params.pagesize ? false : true
					this.apiStatus = res.data.length < this.params.pagesize ? "nomore" : "loadmore"
					this.rows = this.rows.length > 0 ? [...this.rows, ...res.data] : res.data
					if(res.data.length < this.params.pagesize) {
						this.status = 'nomore'
					}
				} else {
					uni.showToast({
						title: res.msg,
						icon: "error"
					})
					this.apiMore = false
					this.apiStatus = 'nomore'
				}
			},
			// 排序
			clickOrder(value) {
				this.order_current = value.name
				this.order_view_open = false

				this.apiMore = true
				this.apiStatus = 'loadmore'
				this.apiPost = false

				this.params.order = value.value
				this.params.page = 1
				this.rows = []
				this.search()
			},
			// 获取分类列表
			async get_classroom_type() {
				const res = await this.$myRequest({
					url: "course/classroom_type",
					type: "post",
					data: {},
				});
				if(res.code){
					this.category_list = res.data
					let k = this.params.type_id
					console.log('k',k)
					console.log('res.data',res.data)

					for(const v of res.data){
						if(v.id == k){
							this.category_current = v.childlist
						}
					}
					// this.category_current = res.data[k]['childlist']
				}
			},
			// 点击顶级分类
			clickCategory(item) {
				this.category_current = item.childlist

				this.params.type_id = item.id
				this.params.category_name = item.name
			},
			// 选择分类筛选
			selectCategory(item) {
				this.params.type_id = item.pid
				this.params.type2_id = item.id
				this.params.category_name = item.name
				// 重新搜索
				this.params.page = 1
				this.rows = []
				this.category_view_open = false
				this.apiMore = true
				this.apiStatus = 'loadmore'
				this.apiPost = false
				this.search()
			}
		}
	}
</script>

<style lang="scss">
	.warp{
		background-color: #FFF;
		min-height: 100vh;
		max-width: 1600rpx;
		margin: auto;
		// 顶部
		.top_box {
			background-color: #FFF;
			position: fixed;
			top: 0;
			width: 100%;
			max-width: 1600rpx;
			z-index: 100;
			// 搜索
			.search_box {
				::v-deep .uv-drop-down{
					justify-content: space-around;
				}
				.order_list{
					.order_item{
						padding: 20rpx 10rpx;
						border-bottom: 1px solid #ccc;
					}
				}
			}
			// 筛选
			.drop_warp {
				position: fixed;
				background-color: #FFF;
				z-index: 100;
				top: 44px;
				width: 100vw;
				max-width: 1600rpx;
				display: flex;
				justify-content: space-around;
				box-sizing: border-box;
				height: 80rpx;
				line-height: 80rpx;
				border-bottom: 1px solid #dcdcdc;
				.drag_item_w{
					margin: auto;
				}
				// 排序下拉 start
				.order_list_warp{
					line-height: 1em;
					position: absolute;
					top: 80rpx;
					left: 0;
					width: 100vw;
					max-width: 1600rpx;
					border-top: 1px solid #e2e2e2;
					background-color: rgba(0, 0, 0, 0.5);
					height: calc(100vh - 80rpx - 44px);
					.order_list {
						background-color: #FFF;
						max-width: 1600rpx;
						.order_item {
							padding: 20rpx;
							border-bottom: 2px dashed #e2e2e2;
							display: flex;
							justify-content: space-between;
							align-items: center;
						}

						.order_item_active {
							color: #fd5c02;
							font-weight: bold;
						}
					}

				}
				// 排序下拉 end
				// 分类下拉 start
				.category_list_warp{
					width: 50%;
					line-height: 1em;
					position: absolute;
					top: 80rpx;
					left: 0;
					width: 100vw;
					max-width: 1600rpx;
					border-top: 1px solid #e2e2e2;
					background-color: rgba(0, 0, 0, 0.5);
					height: calc(100vh - 80rpx - 44px);
					.category_list {
						background-color: #FFF;
						display: flex;
						height: 50vh;
						max-width: 1600rpx;
						font-size: 30rpx;
						.category_one{
							width: 260rpx;
							background-color: #f2f2f4;
							overflow-y: scroll;
							// padding: 10rpx 0;
							.category_item{
								padding: 30rpx 20rpx;
								display: flex;
								align-items: center;
								box-sizing: border-box;
								image{
									width: 40rpx;
									height: 40rpx;
								}
								.category_name{
									margin-left: 14rpx;
									width: 130rpx;
								}
							}
							.category_item_active{
								background: #e8e8e9;
								color: #DC3528;
								font-weight: bold;
							}
						}
						.category_two{
							flex: 1;
							background: #f8f8f9;
							max-width: 1380rpx;
							overflow-y: scroll;
							.category_item{
								padding: 30rpx 20rpx;
								display: flex;
								align-items: center;
								.item_img{
									margin-left: 40rpx;
									width: 40rpx;
									height: 40rpx;
									image{
										width: 40rpx;
										height: 40rpx;
										flex: 1;
									}
								}
								.category_name{
									margin-left: 14rpx;
								}
							}
							.category_item_active{
								background: #fff;
								color: #DC3528;
								font-weight: bold;
							}
							.category_item:first-child{
								border-bottom: 1px dashed #DC3528;
								.item_img{
									margin-left: 0rpx;
								}
							}
						}
					}

				}
				// 分类下拉 end
				.drag_item {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 200rpx;
					margin: auto;

					.item_name {
						margin-right: 8rpx;
						// width: 200rpx;
						// height: 80rpx;
						// overflow-y: hidden;
						// text-overflow: ellipsis;
					}
					.item_name_select{
						color: #fe5d03;
					}
					.item_num{
						margin: 0 6rpx 0 6rpx;
						border-radius: 50%;
						background-color: #fe5d03;
						color: #fff;
						height: 40rpx;
						width: 40rpx;
						text-align: center;
						line-height:40rpx;
					}
				}
				.drag_item_active{
					color: #fe5d03;
				}
			}

		}
		// 列表
		.course_list{
			padding: calc(40px + 46px) 20rpx 20rpx 20rpx;
			// background-color: rgb(244, 244, 244);
			background-color: #fff;
			.course_item{
				display: flex;
				margin-top: 20rpx;
				border-bottom: 1px dashed #dcdcdc;
				padding-bottom: 20rpx;
				.course_img{
					margin-right: 20rpx;
					image{
						width: 37vw;
						height: 30vw;
						max-width: 400rpx;
						max-height: 300rpx;
					}
				}
				.course_r{
					flex: 1;
					.course_author{
						margin-top: 10rpx;
						font-size: 28rpx;
						color: #333;
					}
					.course_other{
						margin-top: 10rpx;
						display: flex;
						align-items: center;
						.course_icon{
							display: flex;
							align-items: center;
							margin-right: 20rpx;
							.course_icon_text{
								margin-left: 10rpx;
								font-size: 24rpx;
								color: #333;
							}
						}
					}
					.course_time{
						margin-top: 10rpx;
						.course_icon{
							display: flex;
							align-items: center;
							margin-right: 20rpx;
							.course_icon_text{
								margin-left: 10rpx;
								color: #999;
								font-size: 24rpx;
							}
						}
					}
				}
			}

		}

	}

</style>